<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body>div{
        width: 50px;
        height: 50px;
        box-sizing:border-box;
        display:inline-block;
        border:2px solid red;
        position:relative;
    }
    div>div{
        width: 50px;
        height: 50px;
        box-sizing:border-box;
        display:inline-block;
        border:2px solid yellow;
        position:absolute;
        top:-2px;
        left:-2px;
    }
    div>p{
        text-align:center;
    }
    section{
        width: 50px;
        height: 50px;
        box-sizing:border-box;
        display:inline-block;
        /*原版section就是蓝色边框*/
        border:2px solid blue;
        position: absolute;
        top:-2px;
        left:-2px;
        border-radius:50%;
    }
    section>div:nth-of-type(1){
        width: 25px;
        height: 50px;
        box-sizing:border-box;
        display:inline-block;
        /*左半部分和section颜色相同*/
        /*当数值小于50的时候让左半部分转*/
        /*当数值大于50的时候左半部分换成和右半部分一样的颜色,然后在转*/
        border:2px solid blue;
        float:left;
        position:absolute;
        top:-2px;
        left:-2px;
        border-right:0px;
        transform-origin:25px 25px;
        border-top-left-radius:25px;
        transform: rotate(0deg);
        border-bottom-left-radius:25px;
    }
    section>div:nth-of-type(2){
        width: 25px;
        height: 50px;
        box-sizing:border-box;
        display:inline-block;
        border:2px solid yellow;
        position:absolute;
        top:-2px;
        right:-2px;
        border-left: 0px;
        transform-origin:0px 25px;
        border-top-right-radius:25px;
        transform: rotate(0deg);
        border-bottom-right-radius:25px;
    }
</style>
<body>
    <!--一个容器-->
    <div>
        <!--数字-->
        <p>25</p>
        <!--section绝对定位了,正好复盖上去-->
        <section>
            <!--左半部分-->
            <div></div>
            <!--右半部分-->
            <div></div>
        </section>
    </div>
</body>
</html>